<template>
  <view class="view-topic">
    <!-- <view class="stem">
		    一，选择题
		  </view> -->
    <view class="title">
      <!-- <jyf-parser v-if="topicObj.parentId" :html="topicObj.topicTitle.replace(/<p.*?>/,`<p>${topicObj.num}.`)" ref="article"></jyf-parser> -->
      <jyf-parser :html="topicObj.topicTitle" ref="article"></jyf-parser>
      <view class="displayinline" v-if="topicObj.topicTypeId===topicType.simple&&topicObj.studentTopicInfos&&topicObj.studentTopicInfos.length>0"><label
          class="tips">得分：</label><input type="digit" :maxlength="2" placeholder="输入分数" placeholder-class="placeholder_class"
          class="displayinline verticalAlign score-input" @input="controlNumber(topicObj,$event)" v-model="topicObj.score"
          @confirm="$hideKeyboard()"></view>
    </view>
    <!-- 单选题 -->
    <block v-if="topicType.radio===topicObj.topicTypeId">
      <radios-group :optionList="topicObj.optionGroup[1]" :disabled="true" :answer="topicObj.studentTopicInfos&&topicObj.studentTopicInfos.length>0?topicObj.studentTopicInfos[0].option:''"
        right=""></radios-group>
    </block>
    <!-- 多选题 -->
    <block v-if="topicType.checked===topicObj.topicTypeId">
      <check-group :optionList="topicObj.optionGroup[1]" :disabled="true" :answer="topicObj.studentTopicInfos&&topicObj.studentTopicInfos.length>0?topicObj.studentTopicInfos[0].option:''"></check-group>
    </block>
    <!-- 填空题 -->
    <block v-if="topicType.fill===topicObj.topicTypeId&&describe!='错题集'">
      <text class="blue margin-lr">作答:</text>
      <!-- 已做题显示 -->
      <block v-if="topicObj.studentTopicInfos.length>0">
        <view class="option u-f-ac filloption" :class="answerRight(topicObj.studentTopicInfos,index+1,'right-border','wrong-border')"
          v-for="(item,index) in topicObj.topicTitle.match(/(___[0-9]___)/g)" :key="index">
          <view v-if="answerRight(topicObj.studentTopicInfos,index+1,'right-color icon-duigou','wrong-color icon-cuo')=='null'"
            class="check iconfont">({{index+1}})</view>
          <view v-else :class="['check iconfont',answerRight(topicObj.studentTopicInfos,index+1,'right-color icon-duigou','wrong-color icon-cuo')]"></view>
          <input class="option-text fontsize28" type="text" placeholder="请输入你的答案" placeholder-class="placeholder_class"
            disabled :value="answerFill(topicObj.studentTopicInfos,index+1,'')" />
        </view>
      </block>
      <!-- 错题集显示 -->
      <block v-else>
        <view class="option u-f-ac filloption" v-for="(item,index) in topicObj.topicTitle.match(/(___[0-9]___)/g)" :key="index">
          <view class="check iconfont">({{index+1}})</view>
          <input class="option-text fontsize28" type="text" placeholder="请输入你的答案" placeholder-class="placeholder_class"
            disabled />
        </view>
      </block>
    </block>
    <!-- 简答题 -->
    <block v-if="topicType.simple===topicObj.topicTypeId">
      <view class="topic margin-lr paddingTopbom30" v-for="(item,index) in topicObj.examPaperTopicDTOS" :key="index+'-'+item.sort">
        <!-- <jyf-parser :html="item.topicTitle.replace(/<p.*?>/,`<p>${(index+1)}.`)" ref="article"></jyf-parser> -->
        <jyf-parser :html="item.topicTitle" ref="article"></jyf-parser>
        <view class="displayinline" v-if="item.studentTopicInfos&&item.studentTopicInfos.length>0"><label class="tips">得分：</label><input
            type="digit" :maxlength="2" placeholder="输入分数" placeholder-class="placeholder_class" class="displayinline verticalAlign score-input"
            @input="controlNumber(item,$event)" v-model="item.score" @confirm="$hideKeyboard()"></view>
        <!-- 　optionData.find(option=>option.id===item.parentId&&option.sort===item.num).score -->
        <!-- <view class="litter-topic">（1）投其葬日，驰往赴之 </view>　
        　<view class="litter-topic">（2）省书见瘗，怆然感之 </view> -->
      </view>
      <block v-if="describe!='错题集'">
        <text class="blue margin-lr">作答:</text>
        <view class="picbox u-f-ac margin-lr paddingTopbom30" v-if="topicObj.examPaperTopicDTOS" v-for="(item,index) in topicObj.examPaperTopicDTOS"
          :key="index+item.id">
          <text>{{index+1}}.</text>
          <view class="u-f-ac">
            <block v-for="(img,key) in simpleData(item.studentTopicInfos)" :key="key">
              <image v-if="img" :src="$ossHost+img" @click="previewImage($ossHost+img)" class="u-f-ajc margin-lr"></image>
            </block>
            <view class="tupian u-f-ajc u-f-fdc margin-lr" v-if="item.studentTopicInfos.length==0">
              <span class="iconfont icon-weipaizhaozongjie-solid"></span>
              <text class="fontsize24 placeholder_class">未拍照上传答案</text>
            </view>


          </view>
        </view>
        <view class="picbox u-f-ac margin-lr paddingTopbom30" v-show="!topicObj.examPaperTopicDTOS">
          <!-- <text>1.</text> -->
          <view class="u-f-ac">
            <block v-for="(img,index) in simpleData(topicObj.studentTopicInfos) " :key="index">
              <image v-if="img" :src="$ossHost+img" @click="previewImage($ossHost+img)" class="u-f-ajc margin-lr"></image>
            </block>
            <view class="tupian u-f-ajc u-f-fdc margin-lr" v-if="topicObj.studentTopicInfos.length==0">
              <span class="iconfont icon-weipaizhaozongjie-solid"></span>
              <text class="fontsize24 placeholder_class">未拍照上传答案</text>
            </view>

          </view>
        </view>
      </block>
    </block>
    <!-- 完形填空 -->
    <block v-if="topicType.cloze===topicObj.topicTypeId">
      <view class="option u-f-ac" v-for="(item,index) in topicObj.optionGroup" :key="index" :class="{'select-border':clozeValue===item.optionId}">
        <view class="check color64">{{(parseInt(index))}}</view>
        <transverseRadio class="option-text flex1 u-f-jsb" :optionList="item" :disabled="true" :answer="answerCloze(topicObj.studentTopicInfos,parseInt(index))"
          ></transverseRadio>

      </view>
    </block>
    <!-- 排序题 -->
    <block v-if="topicType.sort===topicObj.topicTypeId">
      <view class="option u-f-ac filloption" v-for="(item,index) in topicObj.optionGroup[1]" :key="index">
        <view class="check">({{(parseInt(index)+1)}})</view>
        <text class="option-text">{{item.optionText}}</text>
      </view>
      <block v-if="describe!='错题集'">
        <view class="blue margin-lr paddingTopbom30">作答:</view>
        <block v-if="stuInfoStr.length>0">
        <view class="option fontsize28 placeholder_class u-f-ac" :class="flag?'right-border':'wrong-border'">
           <view class="check iconfont" :class="flag?'right-color icon-duigou':'wrong-color icon-cuo'"></view>
          <span class="margin-lr">{{stuInfoStr}}</span> 
          </view>
        <view class="fontsize28 paddingTopbom30 margin-lr colorf5" v-if="!flag">正确答案:{{rightStr}}</view>
        </block>
        <block v-else>
          <view class="option fontsize28 placeholder_class u-f-ac"><span class="margin-lr">请输入你的答案</span> </view>
        </block>
     
      </block>
    </block>
    <!-- 混合题 -->
    <block v-if="[topicType.multipleTopic,topicType.mixTopic].includes(topicObj.topicTypeId) ">
      <block v-for="(item,index) in topicObj.examPaperTopicDTOS">
        <view-topic :optionData="optionData" :topicObj="item"></view-topic>
      </block>

    </block>
  </view>

</template>

<script>
  import {
    topicType
  } from '@/utils/model.js'
  import checkGroup from '@/components/check-group.vue'
  import radiosGroup from '@/components/radio-group.vue'
  import transverseRadio from '@/components/transverse-radio'
  export default {
    name: 'viewTopic',
    components: {
      'check-group': checkGroup,
      'radios-group': radiosGroup,
      transverseRadio
    },
    props: {
      topicObj: Object,
      optionData: {
        type: Array,
        default: function() {
          return []
        }
      },
      describe: String
    },
    data() {
      return {
        topicType,
        clozeValue: '',
        rightStr:'',
        stuInfoStr:'',// 用户做题记录
        flag:true // 做题是否正确标记
      };
    },
    watch: {
      topicObj: function(val) {
        // topicObj.examPaperTopicDTOS=val
        // console.log('watch', val)
        if(this.topicType.sort===this.topicObj.topicTypeId){
          this.answerSort(this.topicObj.optionGroup,this.topicObj.studentTopicInfos)
        }
      },
      optionData: (val) => {
        console.log('optiondata', val)
      }
    },
    methods: {
      // 渲染答案
      answerRight(data, index, right, wrong) {
        if (data.length > 0) {
          let arr = data.filter(item => item.sort === index)
          if (arr.length > 0)
            return arr[0].topicRight ? right : wrong
        }
        return 'null'
      },
      // 渲染填空题答案
      answerFill(data, index, def) {
        if (data.length > 0) {
          let arr = data.filter(item => item.sort === index)
          return arr.length > 0 ? arr[0].text : def
        }
        return def
      },
      // 渲染完形填空答案
      answerCloze(data, index) {
        console.log(data,index)
        if (data.length > 0) {
          let obj = data.find(item => item.sort === index)
          console.log(obj.option)
          return obj.option
        }
        return ''
      },
      // 渲染插入语句答案
      answerSort(optionGroup,studentTopicInfos) {
        // 正确答案
        let rightList=optionGroup[1].sort(function(a,b){return a.rightSort-b.rightSort})
       this.rightStr= rightList.map(item=>item.optionId).join('')
       
       // 用户做题记录
       this.stuInfoStr=studentTopicInfos.map(item=>{
         if(!item.topicRight){
           this.flag=false
         }
         return item.option
       }).join('')
      },
      // 简答题
      simpleData(data) {
        if (data && data.length > 0) {
          return data.length > 0 ? data[0].text.split('|') : []
        }
        return []
      },
      // 控制分数
      controlNumber(item, e) {

        let score = parseFloat(e.target.value)
        if (e.target.value && parseFloat(e.target.value) < 0) {
          score = '0'
        } else if (e.target.value && parseFloat(e.target.value) > item.optionGroup[1][0].score) {
          score = item.optionGroup[1][0].score>0
        }
        uni.$emit('saveOptionData', {
          score: score,
          id: item.studentTopicInfos[0].id,
          sort: item.num
        })
        console.log(score)
        return score
      },
      // 预览图片
      previewImage(imgurl) {
        uni.previewImage({
          urls: [encodeURI(imgurl)],
          longPressActions: false
        });
      }
    }
  }
</script>

<style lang="scss">
  .view-topic {
    font-size: px2vw(28);

    .option {
      @include option;
    }

    .title {
      padding: px2vh(20) px2vw(16);
      line-height: px2vh(40);
      word-break: break-all; //强制换行
    }

    .blue {
      color: $global-color;
    }
  }

  // 简答题
  .topic {
    .litter-topic {
      text-indent: 1em;
      margin: px2vh(30) 0px;
    }
  }

  .score {
    display: inline-block;
    color: #f55555;
  }

  .picbox {
    .tupian {
      width: px2vw(208);
      height: px2vw(130);
      background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
      border: 1px dashed #CCCCCC;
      border-radius: 8px;
    }

    .iconfont {
      font-size: px2vw(56);
      color: #CCCCCC;
    }

    image {
      width: px2vw(208);
      height: px2vw(130);
    }
  }

  .input-topic {
    width: 100%;
    text-align: start;
    text-indent: 1em;
  }

  .tips {
    color: #F55555;
  }

  // 填空题
  .filloption {
    .check {
      color: #000000 !important;
    }

    .option-text {
      border: none;
      border-radius: 0px;
      border-left: 1px solid #cccccc;
      text-align: start;

    }

    uni-input {
      flex: 1;
      height: px2vh(40);
      line-height: px2vh(40);
    }

  }

  .displayinline {
    display: inline-block;
  }

  .verticalAlign {
    vertical-align: middle
  }

  .score-input {
    border: none;
    text-align: left;
  }

  .img-box {
    .del {
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }
</style>
